介绍

vue+springboot的前后端分离项目,博客网站。

登录页

首页

  1. 首页,走马灯博文推荐(显示的是博文的封面,点击进去可以看到博文内容)
  2. 博文

实现了分页,和按照博文作者或者标题搜索

随便点击一篇博文浏览其内容看看

下载功能



有背景音乐,可以点击音乐打开,也可以点击关这个文字按钮打开,但是刷新网页后第一次点击关这个按钮前要先点击以下音乐加载一下资源。



点击个人中心可以查看个人信息

admin是管理员账号,有额外的删除博文功能,编辑功能还没写,首页的动画渲染以及其他导航栏的也还没写。

可以写新博客

标题输入内容,然后点击new tag来增加tag,回车添加,点击照片卡来添加备选封面图,

再点击下载按钮确认封面图片,下面是富文本quill,可以添加图片超链接,以及一些字体,这篇README就是用这个写的。

F12再点击确认提交可以看到保存详情。


功能

技术栈


后端

SpringBoot + JPAR(数据库)


前端

Vue + Vue-Router + Axios + ElementUI + Quill


数据库

mysql



代码展示:
前端部分
  Text  是自定义组件,包装了ElementUI的Card
  TextMessage 是博文具体内容
  Wirte是写新博文的页面
  Content是博文页
  List无内容
  Profile 是个人主页
  Login是登录页面
  Signup是注册页面
  NotFind是404
  Main是主页,有部分子组件,在router/index.js里面有

后端部分


CrosConfig配置作用有两个,一个是设置接收的前端跨域请求,还有一个是本地资源路由映射,这个映射是为了方便前端页面获取后端资源的(还有一个application.yml文件的映射是为了方便后端保存文件的路径)

TextRe.../UserRe...是JPAR连接数据库的接口


其余三个Controller,File是上传文件和下载文件,删除文件的接口,Text是Text表的接口,User是User表的接口



MySql数据库